<!DOCTYPE html>
<html>
<head>
    <!--合拍榜单-->
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
    <style>
        .dynamaic-detail .content {
            margin-top: 45px;
            background-color: #fff;
        }

        .dynamaic-detail .content .author {
            height: 60px;
            margin-top: 10px;
            position: relative;
            border-bottom: 1px solid #f5f5f5
        }

        .dynamaic-detail .author > img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            float: left;
            margin: 0 10px 0 15px
        }

        .dynamaic-detail .author .account-name {
            font-size: 0.875rem;
            color: black
        }

        .dynamaic-detail .author .account-name img {
            width: 14px;
            margin-left: 5px;
        }
        .dynamaic-detail .author .profession {
            font-size: 0.625rem;
            color: #979797;
            margin-top: 5px;
            margin-bottom: 5px
        }

        .dynamaic-detail .author button {
            position: absolute;
            right: 15px;
            top: 8px;
            padding: 3px 13px 3px 10px;
            background-color: #feb930;
            color: #fff;
            border: none;
            border-radius: 3px
        }

        .dynamaic-detail .author button i {
            vertical-align: top;
            margin-right: 3px
        }

        .dynamaic-detail .tag-info {
            border-bottom: 1px solid #f5f5f5;
        }

        .dynamaic-detail .tag-info ul {
            width: 31vw;
            float: left;
            text-align: center;
            margin: 20px 0
        }

        .dynamaic-detail .tag-info:after {
            display: block;
            content: '';
            clear: both;
            overflow: hidden
        }

        .dynamaic-detail .tag-info ul:nth-child(2) {
            border-left: 1px solid #f5f5f5;
            border-right: 1px solid #f5f5f5;
        }

        .dynamaic-detail .tag-info ul li:first-child {
            margin-bottom: 15px;
            color: #808080
        }

        .dynamaic-detail .tag-info ul li:last-child {
            color: black
        }

        .dynamaic-detail .motel-info {
            padding-bottom: 20px;
            border-bottom: 1px solid #f5f5f5;
        }

        .dynamaic-detail .motel-info:after {
            display: block;
            content: '';
            clear: both;
            overflow: hidden
        }

        .dynamaic-detail .motel-info p {
            margin: 15px 15px 0;
            line-height: 25px;
            font-size: 0.875rem
        }

        .dynamaic-detail .motel-info .btn-group {
            margin-right: 15px;
        }

        .dynamaic-detail .motel-info .btn-group button {
            color: #808080;
            border: none;
            background: transparent;
            font-size: 0.875rem;
        }

        .dynamaic-detail .get-info {
            padding: 20px 15px;
            border-bottom: 1px solid #f5f5f5;
            text-align: center
        }

        .dynamaic-detail .get-info p {
            font-size: 0.875rem;
            margin-bottom: 10px;
        }

        .dynamaic-detail .get-info a {
            font-size: 0.625rem;
            padding: 3px 20px;
            background-color: #f35273;
            color: white;
            border-radius: 3px;
            font-weight: 100;
            margin-bottom: 15px;
        }

        .dynamaic-detail .get-info span {
            display: inline-block;
            margin-top: 15px;
            font-size: 0.625rem
        }

        .dynamaic-detail .add-img {
            margin: 20px 0;
        }

        .dynamaic-detail .add-img p {
            margin-left: 15px;
            font-size: 0.875rem;
            margin-bottom: 15px
        }

    </style>
</head>

<body class="dynamaic-detail">
<header id="header">
    <a href="detail.html" class="iconfont fl">&#xe63f;</a>
    <div class="title">模特资料</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content ">

    <div class="author">
        <img src="../images/user_mini.png">
        <div class="account-name">Eugene
            <img src="../skin/xhdpi/authentication.png" alt=""/>
            <img src="../skin/xhdpi/sex_m.png" alt=""/>
            <img src="../skin/xhdpi/phone_m.png" alt=""/>
        </div>
        <div class="profession">模特</div>
        <button><i class="iconfont">&#xe600;</i>关注</button>
    </div>
    <div class="tag-info">
        <ul>
            <li>面向地区</li>
            <li>上海静安</li>
        </ul>
        <ul>
            <li>费用</li>
            <li>希望互免</li>
        </ul>
        <ul>
            <li>发布时间</li>
            <li>今天02:25</li>
        </ul>
    </div>
    <div class="motel-info">
        <p>本人身高176，体重53kg,新人一枚，想要多多练习平面拍摄的能力，摄影师会化妆，有衣服有想做的造型最好，没有也可以加微信详细沟通，不拍私房。</p>
        <div class="btn-group fr">
            <button>收藏</button>
            <button>投诉</button>
        </div>
    </div>
    <div class="get-info">
        <p>收到约拍信息12条</p>
        <a href="#">您已提交了约拍请求，查看详情>></a>
        <br>
        <span>她可以接受微信通知，当您提交约拍后，平台会即时通知她处理</span>
    </div>
    <div class="add-img">
        <p>她附加的照片 (点击图片可以查看原图) </p>
        <a href="#"><img src="../images/img1.jpg" alt=""></a>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a class="find" href="../find/index.html">
                <p>发现</p>
            </a>
        </li>
        <li class="active">
            <a class="camera" href="index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li>
            <a class="person" href="../user/user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
</body>
</html>